<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>幸运大抽奖</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
</head>

<body>
	<div class="g-content">
		<div class="g-lottery-case">
			<div class="g-box">
				<div class="g-title">幸运大抽奖</div>
				<div class="g-lottery-box">
					<div class="g-lottery-img">
						<div class="playbtn"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
	<script>
		$(function () {
			var isTure = 0;
			/**
			 * 处理样式
			*/
			var handleStyle = function () {
				// 圆环背景
				var circleImg = $('.g-lottery-box');
				var circleWidth = circleImg.width();
				circleImg.css('height', circleWidth);
				// 圆形背景
				var bkImg = $('.g-lottery-img');
				var distance = (circleWidth / 375) * 20;
				bkImg.css({ 'height': circleWidth - 2 * distance, 'width': circleWidth - 2 * distance, left: distance, top: distance });
			}
			handleStyle();

			var clickfunc = function () {
				var data = [1, 2, 3, 4, 5, 6];
				//data为随机出来的结果，根据概率后的结果
				data = data[Math.floor(Math.random() * data.length)];
				switch (data) {
					case 1:
						rotateFunc(1, 0, '恭喜您获得2000元理财金!');
						break;
					case 2:
						rotateFunc(2, 60, '谢谢参与~再来一次吧~');
						break;
					case 3:
						rotateFunc(3, 120, '恭喜您获得5200元理财金!');
						break;
					case 4:
						rotateFunc(4, 180, '恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!');
						break;
					case 5:
						rotateFunc(5, 240, '谢谢参与~再来一次吧~');
						break;
					case 6:
						rotateFunc(6, 300, '恭喜您获得1000元理财金!');
						break;
				}
			}
			
			// 点击抽奖
			var $btn = $('.playbtn');
			$btn.click(function () {
				if (isTure) return; // 如果在执行就退出
				clickfunc();
			});
			
			var rotateFunc = function (awards, angle, text) {
				isTure = true;
				$btn.stopRotate();
				$btn.rotate({
					angle: 0,
					duration: 4000, //旋转时间
					animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
					callback: function () {
						isTure = false; // 标志为 执行完毕
						alert(text);
					}
				});
			};
		});
	</script>
</body>

</html>